import BaseContent from "coms/baseContent";
import { recommebdList, categoryList, articleList } from '@/api/article'
import BaseCard from "coms/baseCard";
import './index.less';
import { useEffect } from "react";
import { useNavigate } from 'react-router-dom';
import { useTranslation } from "react-i18next";//转换中英文
const ArchivesView = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();//切换语言触发的hooks
  useEffect(() => {
    [...document.querySelectorAll('.lis')].forEach((item, index) => {
      item.style.animation = `example1 0.${index + 1}s ease-out 0.${index + 2}s backwards`;

    }, [articleList])
  })

  return (
    <div className="artbox">
      <div className="contentLeft">
        <div className="contentTop">
          <h2>归档</h2>
          <p>共计 <span>12</span> 篇</p>
        </div>
        <div className="contentDown">
          <h2>2022</h2>
          <p>May</p>
          {/* 归档数据 */}
          <BaseContent request={async () => {
            const { data: { data } } = await articleList();
            console.log(data);
            return {
              data
            }
          }}>
            {
              (item, index) => {
                return <ul className="archivesItem" key={index}>
                  <li className="lis" onClick={() => navigate(`/article/${item.id}`)}>
                    <span>{item.updateAt.slice(5, 10)}</span>
                    <b>{item.title}</b>
                  </li>
                </ul>
              }
            }
          </BaseContent>
        </div>
      </div>
      {/* 右侧导航 */}
      <div className="card">
        {/*推荐阅读  */}
        <BaseCard title={t("推荐阅读")}
          request={async () => {
            const { data: { data } } = await recommebdList();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <p key={index} onClick={() => navigate(`/article/${item.id}`)}>{item.title} · <span>大约{ }小时前</span></p>
            }
          }
        </BaseCard>
        {/*文章分类*/}
        <BaseCard title={t("文章分类")}
          className={"types"}

          request={async () => {
            const { data: { data } } = await categoryList();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <p key={index}><span>{item.label}</span> <span>共计 {t(item.articleCount)} 篇文章</span></p>
            }
          }
        </BaseCard>
      </div>

    </div>
  )
}

export default ArchivesView;